<template>
  <div>
    <header class="header_w clear">
      <!--<a v-show="isBack" class="back" href="javascript:;" @click="goBack"></a>-->
      <router-link v-show="isBack" tag="a" :to="to" class="back" ></router-link>
      <p class="title" v-html="title"></p>
      <router-link to="/bind" tag="a" class="right" v-if="isLink" v-html="linkTitle"></router-link>
      <router-link v-if="isRight" tag="a" to="/messageCenter">
        <span class="message_tbn">
          <em class="numb" v-if="msgNumb<100 && msgNumb>0" v-html="msgNumb"></em>
          <em class="numb" v-if="msgNumb>99 && msgNumb>0">99+</em>
        </span>
      </router-link>
      <!--<span v-if="isRight" class="message_tbn">-->
      <!--<em class="numb">99+</em>-->
      <!--</span>-->
    </header>
    <div class="header_default"></div>
  </div>

</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      isBack: {
        type: Boolean,
        default: true
      },
      isRight: {
        type: Boolean,
        default: false
      },
      isLink: {
        type: Boolean,
        default: false
      },
      linkTitle: {
        type: String,
        default: ''
      },
      msgNumb: {
        type: Number,
        default: 0
      },
      to:{
        type: String,
        default: '/main'
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "~common/less/variable.less";

  .header_default {
    position: relative;
    height: 88/@r;
    width: 100%;
  }

  .header_w {
    position: fixed;
    top: 0;
    z-index: 100;
    background: #fff;
    width: 100%;
    padding: 0 20/@r;
    border-bottom: #d6d8dd solid 1px;
    box-sizing: border-box;
    .back {
      position: absolute;
      left: 32/@r;
      top: 0;
      width: 40/@r;
      height: 88/@r;
      background: url(../../common/images/icon_back.png) left center no-repeat;
      background-size: 20/@r 32/@r;
      display: block;
      z-index: 1;
    }
    .right {
      position: absolute;
      top: 0;
      right: 20/@r;
      color: #39a568;
      line-height: 88/@r;
      display: block;
      font-size: 26/@r;
    }
    .title {
      font-size: 34/@r;
      color: #232936;
      text-align: center;
      line-height: 88/@r;
      position: relative;
    }
    .message_tbn {
      position: absolute;
      right: 40/@r;
      top: 22/@r;
      width: 58/@r;
      height: 42/@r;
      display: inline-block;
      background: url(../../common/images/icon_big_msg.png) no-repeat;
      background-size: 58/@r 42/@r;
      .numb {
        padding: 0 6/@r;
        line-height: 18px;
        border-radius: 20/@r;
        display: inline-block;
        position: absolute;
        font-size: 16/@r;
        left: 30/@r;
        top: -18/@r;
        background: #e22d3e;
        color: #fff;
      }
    }
  }
</style>
